<!--月租报价-->
<template>
  <div class="generate-quotation-box ne-relative"
       v-loading="loading"
       element-loading-customClass="ne-loading"
       element-loading-background="rgba(255, 255, 255, 0.6)"
  >
    <div class="" style="height: 100%;overflow-y: auto;">
      <el-form
          ref="TcForm2"
          label-position="left"
          label-width="1rem"
          :model="Form"
      >
        <el-row>
          <h2 class="ne-title-v2">月租报价</h2>
          <DicTable
              height="100%"
              ref="GQTable"
              border
              header-row-class-name="header-row-class"
              :columnData="GQtbs.tableColumns"
              :tableData="GQtbs.tableData"
              :loading="GQtbs.tableLoading"
              :pager="false"
          >
<!--            <template #comments="{ row }">-->
<!--              <div v-if="row.hasOwnProperty('comments')">-->
<!--                <el-input type="textarea" v-model="row.comments"></el-input>-->
<!--              </div>-->
<!--            </template>-->
          </DicTable>
        </el-row>
      </el-form>
      <el-row class="fixed">
        <el-col :span="24" class="flex flex-center">
          <el-button size="medium" @click="closeFun">关闭</el-button>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import DicTable from '@/components/public/DicTable';
// import CustOrderService from '@/api/order/CustOrderService';
import {mapState} from 'vuex';
import refreshList from '@/mixins/custorder/refreshList';

export default {
  name: 'GenerateQuotations',
  mixins: [refreshList],
  data() {
    return {
      loading:false,
      GQtbs: {
        tableColumns: [
          {field: 'circuitName', title: '产品名称', width: '4%'},
          {field: 'inputMode', title: '通达方向', width: '6%'},
          {field: 'nodeName', title: '站点类型'},
          {field: 'productName', title: '本地端口月租费/优惠率'},
          {field: 'custOrderType', title: '本地月租费/优惠'},
          {field: 'speedLink', title: '国内长途/优惠'},
          {field: 'moneyRmbMat', title: '国际长途（网络使用费）/优惠'},
          {field: 'moneyRmbTest', title: '国内部分小计'},
          {field: 'moneyRmbPro', title: '对端金额/对端结算金额/收付一致（是否）'},
          {field: 'subtotal', title: 'z端端口金额/优惠'},
          {field: 'moneyRmbEng', title: 'z端金额/优惠'},
          {field: 'moneyRmbDev', title: '国外部分小计'},
          {field: 'receivables', title: '合计'},
          // {slotName: 'comments', title: '备注', width: '7%'},
        ],
        tableData: [],
        tableLoading: false,
      },
    };
  },
  props: {
    ODKInfo: {
      type: Object,
    },
    CTOInfo: {
      type: Object,
    },
  },
  mounted() {

  },
  computed: {
    ...mapState('user', ['user']),
  },
  created() {
    this.getDetail();
  },
  components: {DicTable},
  methods: {
    async getDetail() {
      this.loading = true;
      let {custOrderId, custSoNumber, offerType, prodOfferId, custId} = this.CTOInfo,
          params = {custOrderId, custSoNumber, custId, ...{prodType: offerType, offerId: prodOfferId}};
      const result = await CustOrderService.qryGenerateQuotationDetail(params),
          res = result.meta;
      this.loading = false;
      if (res.resultCode == '0') {
        if (res.orderAPortQuotes) {
          this.GQtbs.tableData = res.orderAPortQuotes;
        }
      } else {
        this.$message({
          showClose: true,
          message: res.resultMsg,
          type: 'error',
        });
      }
    },
    closeFun() {
      this.$emit('update:show', false);
    }
  },
};
</script>

<style lang="scss" scoped>
.generate-quotation-box {
  height: 84vh;
  padding-bottom: .3rem;

  .fixed {
    position: absolute;
    bottom: -.1rem;
    left: 0;
    right: 0;
    margin: 0 auto;
  }
}
</style>
